<template>
  <div class="container">
    <div class="addBook">
     <div class="blueBtn" @click="goChoose"><img src="../../imgs/scanner.png" alt="" class="scanner" >扫描图书条码</div>
     <div class="conver">
       <img src='../../imgs/sun.png' alt="">
       <div>添加封面</div>
     </div>
     <div class="info">书名</div>
      <div style="overflow:hidden">
        <div class="info two" style="float:left">作者</div>
        <div class="info two" style="float:right">出版社</div>
      </div>
      <div class="info">总页数</div>
      <navigator url="/pages/bookclass/main">
        <div class="info jump">选择书籍分类 <img src="../../imgs/next.png" alt=""></div>
      </navigator>
      <div class="choose">
         <icon type="success" size="20" v-if="status" @click="status = !status"></icon>
         <icon type="circle" size="20" v-else @click="status = !status"></icon><span>此书我已读过</span>
         <icon type="success" size="20" v-if="!status" @click="status = !status" style="margin-left:110rpx;"></icon>
         <icon type="circle" size="20" v-else @click="status = !status" style="margin-left:110rpx"></icon><span>正在阅读此书</span>
      </div>
      <div class="info">当前页数</div>
      <div class="choose">
        <icon type="success" size="20" v-if="plan"  @click="plan = !plan"></icon>
        <icon type="circle" size="20" v-else  @click="plan = !plan"></icon><span>借来的书(为您定制阅读计划)</span>
      </div>
      <div class="info" style="margin-bottom:32rpx">选择归还日期</div>
      <div class="info" style="margin-bottom:32rpx">其他备注 如：图书主人等</div>
      <div class="blueBtn" style="margin-bottom:37rpx">添加</div>
    </div>
    <div class="mask" v-if="description">
      <div class="blueBtn maskBtn"><img src="../../imgs/scanner.png" alt="" class="scanner">扫描图书条码</div>
      <img src="../../imgs/scan.png" alt="123" style="margin-left:50rpx;margin-top:8rpx">
    </div>
  </div>
</template>

<script>
import tabBar from '../../components/tabbar'

export default {
  data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      tabs: ['全部', '已读', '工具书','历史书'],
      activeIndex: 0,
      fontSize: 30,
      show:false,
      bookList:[1,2,3,4,5,6,7,8],
      status:false,
      plan:true,
      description:false,
       radioItems: [
        { name: '工具书', value: '0' ,checked: true},
        { name: '历史书', value: '1' ,checked: false},
        { name: '交互书', value: '2' ,checked: false}
      ],
    }
  },
  components: {
    tabBar
  },
  computed: {

  },
  onShow () {
    console.log(`INDEX`)
  },
  methods: {
     radioChange(e) {
      console.log('携带value值为：' + e.mp.detail.value);
      let radioItems = this.radioItems;
      for (let i = 0; i < radioItems.length; ++i) {
        radioItems[i].checked = radioItems[i].value === e.mp.detail.value;
      }
      this.radioItems = radioItems;
    },
     tabClick(e) {
      console.log(e);
      this.activeIndex = Number(e.currentTarget.id);
    },
    goChoose(){
      wx.navigateTo({ url:'/pages/scanresult/main'})
    }
  },

}
</script>

<style scoped lang="less">
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // overflow: hidden;
  .mask{
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index:9000
  }
   .blueBtn{
      background: #1387FF;
      border-radius:10rpx;
      font-size:32rpx;
      color:#fff;
      height:96rpx;
      line-height:96rpx;
      text-align: center;
    }
    .maskBtn{
      margin:32rpx 26rpx 0
    }
    .scanner{
      width:32rpx;
      height:32rpx;
      margin-right:10rpx;
      vertical-align: middle;
      margin-top:-8rpx;

    }
  .addBook{
    box-sizing:border-box;
    width:100%;
    padding:32rpx 32rpx 0;
    .conver{
      background: #fff;
      width:158rpx;
      height: 220rpx;
      text-align: center;
      margin:48rpx auto;
      img{
        width:60rpx;
        height: 60rpx;
        margin:52rpx 0 46rpx;
      }
      div{
          background: #1387FF;
          border-radius:18rpx;
          font-size:20rpx;
          color:#fff;
          width:120rpx;
          height:36rpx;
          line-height:36rpx;
          text-align: center;
          margin:0 auto;
        }
    }
    .info{
      width: 100%;
      height: 96rpx;
      color:#CECECE;
      font-size: 32rpx;
      text-align: center;
      line-height: 96rpx;
      background: #fff;
      margin-bottom:20rpx;
      box-shadow:0rpx 6rpx 16rpx 0rpx rgba(41,82,130,0.08);
      &.two{
        width:337rpx;
      }
      &.jump{
        color:#2992FE;
        img{
          width:16rpx;
          height: 26rpx;
          float: right;
          margin-right:20rpx;
          margin-top:35rpx;
        }
      }
    }
    .choose{
      margin-bottom:34rpx;
      span{
        margin-left:12rpx;
        color:#999;
        font-size:32rpx;
        vertical-align: middle
      }
    }
  }

}
</style>
